<template>
  <div class="dialog-form">
    <el-form ref="lineRef" :model="form" :rules="rules" label-width="80px">
      <el-row :gutter="36">
        <el-col :span="12">
          <el-form-item label="所属公司" prop="companyId">
            <el-tree-select
              v-model="form.companyId"
              :data="companyList"
              :render-after-expand="true"
              :props="treeProps"
              node-key="id"
              :default-expanded-keys="expandedKeys"
              check-strictly
              :disabled="form.id && (form.hasPatrolTask > 0 || form.hasBus > 0)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="线路编号" prop="lineNo">
            <el-input v-model="form.lineNo" placeholder="支持数字、英文" :disabled="form.id && (form.hasPatrolTask > 0 || form.hasBus > 0)" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="线路名称" prop="lineName">
            <el-input v-model="form.lineName" placeholder="请输入线路名称" :disabled="form.id && (form.hasPatrolTask > 0 || form.hasBus > 0)" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="线路类型" prop="lineType">
            <el-select v-model="form.lineType" placeholder="请选择" :disabled="form.id && (form.hasPatrolTask > 0 || form.hasBus > 0)">
              <el-option
                v-for="item in bus_line_type"
                :key="Number(item.value)"
                :label="item.label"
                :value="Number(item.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="起点站" prop="startStation">
            <el-input v-model="form.startStation" placeholder="请输入起点站" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="终点站" prop="endStation">
            <el-input v-model="form.endStation" placeholder="请输入终点站" />
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="上行时间" prop="firstStationTimeTmp">
            <el-time-picker v-model="form.firstStationTimeTmp" is-range format="HH:mm" value-format="HH:mm"
                            :style="{width: '100%'}" start-placeholder="首车时间" end-placeholder="末车时间" range-separator="至"
                            clearable></el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下行时间" prop="endStationTimeTmp">
            <el-time-picker v-model="form.endStationTimeTmp" is-range format="HH:mm" value-format="HH:mm"
                            :style="{width: '100%'}" start-placeholder="首车时间" end-placeholder="末车时间" range-separator="至"
                            clearable></el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="基础票价" prop="ticketPriceId">
            <el-select v-model="form.ticketPriceId" placeholder="请选择" clearable>
              <el-option
                v-for="item in priceList"
                :key="item.id"
                :label="item.priceDecimal+'元'"
                :value="item.id"
                :disabled="item.status == 2"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="线路状态" prop="status">
            <el-switch
              v-model="form.status"
              inline-prompt
              :active-value="1"
              :inactive-value="2"
              inactive-text="禁用"
              active-text="启用"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </div>
</template>

<script setup>
import { getLine, addLine, updateLine } from "@/api/bus/line"

const { proxy } = getCurrentInstance()
const { bus_line_status, bus_line_type } = proxy.useDict("bus_line_status", "bus_line_type")

const lineRef = ref()
const emits = defineEmits(['cancel', 'confirm'])
const props = defineProps(['companyList', 'priceList'])

const treeProps = {
  label: 'name',
  disabled: (data, node) => {
    return data.state == 2 || data.check == false
  }
}
const expandedKeys = ref([])
const form = ref({
  id: null,
  lineNo: null,
  lineName: null,
  lineType: null,
  // startStation: null,
  // endStation: null,
  firstStationTimeTmp: null,
  endStationTimeTmp: null,
  firstStationTime: null,
  endStationTime: null,
  ticketPriceId: null,
  companyId: null,
  status: 1
})
const rules = {
  lineNo: [
    { required: true, message: "线路编号不能为空", trigger: "blur" },
    { pattern: /^[A-Za-z0-9]+$/, message: "线路编号格式不正确", trigger: "blur" }
  ],
  lineName: [
    { required: true, message: "线路名称不能为空", trigger: "blur" }
  ],
  lineType: [
    { required: true, message: "线路类型不能为空", trigger: "blur" }
  ],
  // startStation: [
  //   { required: true, message: "起点站不能为空", trigger: "blur" }
  // ],
  // endStation: [
  //   { required: true, message: "终点站不能为空", trigger: "blur" }
  // ],
  firstStationTimeTmp: [
    { required: false, message: "上行时间不能为空", trigger: "blur" }
  ],
  endStationTimeTmp: [
    { required: false, message: "下行时间不能为空", trigger: "blur" }
  ],
  ticketPriceId: [
    { required: false, message: "票价不能为空", trigger: "blur" }
  ],
  companyId: [
    { required: true, message: "所属公司不能为空", trigger: "blur" }
  ],
  status: [
    { required: false, message: "线路状态不能为空", trigger: "change" }
  ]
}

const pageInit = (id) => {
  if (id) {
    getLine(id).then(response => {
      form.value = response.data
      if (form.value.firstStationTime) {
        let arr = form.value.firstStationTime.split("—")
        form.value.firstStationTimeTmp = arr
      }
      if (form.value.endStationTime) {
        let arr = form.value.endStationTime.split("—")
        form.value.endStationTimeTmp = arr
      }
      if (form.value.ticketPriceId == 0) {
        form.value.ticketPriceId = null
      }
      expandedKeys.value = [form.value.companyId]
    })
  }
}

const onCancel = () => {
  emits('cancel')
}

const onConfirm = () => {
  lineRef.value.validate(valid => {
    if (valid) {
      if (form.value.firstStationTimeTmp) {
        let arr = Array.from(form.value.firstStationTimeTmp)
        let str = arr.join('—')
        form.value.firstStationTime = str
      } else {
        form.value.firstStationTime = ''
      }
      if (form.value.endStationTimeTmp) {
        let arr = Array.from(form.value.endStationTimeTmp)
        let str = arr.join('—')
        form.value.endStationTime = str
      } else {
        form.value.endStationTime = ''
      }
      if (form.value.id) {
        updateLine(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          lineRef.value.resetFields()
          emits('confirm')
        })
      } else {
        addLine(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          lineRef.value.resetFields()
          emits('confirm')
        })
      }
    }
  })
}

defineExpose({
  pageInit
})

</script>

<style lang="scss" scoped>

</style>